<template>
  <div>
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="身份证号码:">
                <el-input
                  v-model="formInline.idcard"
                  placeholder="请输入身份证号码"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="onSubmit">
                  <el-icon><ZoomIn /></el-icon>
                  加载患者信息
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </template>
        <el-form :model="form" label-width="120px">
          <el-form-item label="身份证号::" style="width: 500px">
            <el-input v-model="form.sfz" />
          </el-form-item>
          <el-form-item label="患者名字:" style="width: 500px">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="患者电话:" style="width: 500px">
            <el-input v-model="form.iphone" />
          </el-form-item>
          <el-form-item label="患者地址:" style="width: 500px">
            <el-input v-model="form.address" />
          </el-form-item>
          <el-form-item label="患者性别:" style="width: 500px">
            <el-select v-model="form.sex">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="患者年龄:" style="width: 500px">
            <el-input v-model="form.age" />
          </el-form-item>
          <el-form-item label="患者出生年日:">
            <el-col :span="11">
              <el-date-picker
                v-model="form.date1"
                type="date"
                placeholder="年-月-日"
                style="width: 100%"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="就诊科室:">
            <div>
              <el-radio-group v-model="form.radio" size="large" is-button>
                <!-- 循环遍历 -->
                <el-form-item v-for="item in 科室" :key="item">
                  <el-radio-button :label="item" />
                </el-form-item>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item label="挂号费:" style="width: 500px">
            <span>
              <span style="color: red">{{ form.registration }}</span>
            </span>
          </el-form-item>
        </el-form>

        <hr />

        <el-form :model="form" label-width="120px">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="科室" width="180" />
            <el-table-column prop="name" label="科室名称" />
            <el-table-column prop="amount1" sortable label="当前号数" />
          </el-table>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";

const formInline = reactive({
  //身份证
  idcard: "",
});

const onSubmit1 = () => {
  console.log("submit!");
};

//病人信息
const form = reactive({
  sfz: "",
  name: "",
  iphone: "",
  address: "",
  sex: "",
  age: "",
  region: "",
  date1: "",
  radio: "",
  registration: 0,
});

//门诊信息
const 科室 = ["门诊", "门诊+病历本", "急诊", "急诊+病历本", "孕诊"];

const onSubmit = () => {
  console.log("submit!");
};

//门诊表格
import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";

interface Product {
  id: string;
  name: string;
  amount1: number;
}

interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[];
  data: T[];
}

const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "Total Cost";
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = `$ ${values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!Number.isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0)}`;
    } else {
      sums[index] = "N/A";
    }
  });

  return sums;
};

const tableData: Product[] = [
  {
    id: "12987122",
    name: "Tom",
    amount1: 1,
  },
];
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

/* 左浮动 */
</style>
